<template>
  <view class="maintain-page">
    <view class="maintain-top">
      <swiper autoplay circular :indicator-dots="true" indicator-active-color="#319289">
          <swiper-item v-for="(item, index) in 3" :key="index">
              <image class="top-banner" src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/meifa/Rectangle%2034625584%403x.png" mode="aspectFit" />
          </swiper-item>
      </swiper>
    </view>

    <!-- <view class="service-list">
      <view v-for="(item, index) in serviceList" :key="index" class="service-item">
        <image :src="item.bgUrl" mode="aspectFill" class="service-bg"></image>
        <view class="service-content">
          <view class="service-title">{{item.serviceTitle}}</view>
          <view class="service-tip">{{item.serviceTip}}</view>
        </view>
      </view>
    </view> -->

    <view class="maintain-main">
      <view class="menu-list">
        <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="clickMenu(index)">
          <view><image class="filter-icon" :src="item.iconUrl" mode="aspectFit" /></view>
          <view :class="index==selectMenuIndex?'menu-title active':'menu-title'">{{item.menuName}}</view>
        </view>
      </view>

      <view class="select-section">
        <view class="select-item active" @click="clickArea">
          <text>{{selectedDistrict}}</text>
          <uni-icons type="down" color="#13B09F" size="12" />
          <!-- <image style="width:24rpx;height:24rpx" :src="'/pagesTwo/static/images/filter_expand.png'" mode="aspectFit" /> -->
        </view>
        <view class="select-item">
          <text>距您最近</text>
          <!-- <image :src="'/pagesTwo/static/images/filter_expand.png'" mode="aspectFit" /> -->
        </view>
        <view class="select-item">
          <text>低价优先</text>
          <!-- <image :src="'/pagesTwo/static/images/filter_expand.png'" mode="aspectFit" /> -->
        </view>
      </view>

      <view class="store-list">
        <view class="store-item">
          <view class="store-item-left">
            <image class="store-logo" src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/meifa/%E4%BD%8D%E5%9B%BE%403x.png" mode="aspectFit" />
            <view class="store-lable" style="margin-bottom: 12rpx; background-color: #E3FFEA; color: #29C547;">洗剪吹</view>
						<view class="store-lable" style="background-color: #FFF0E7; color: #FF5F00;">烫发</view>
          </view>
          <view class="store-item-right">
            <view class="store-title">丽人造型（上海共和新路店）</view>
            <view class="store-time">营业时间：08:00-19:00</view>
            <view class="store-dist">距您3.2km 共和新路435号</view>
            <view class="store-combo">专业造型洗剪吹<text style="color:#FF5F00">￥268.00</text> <text style="color:#AAAAAA">￥268.00</text></view>
            <view class="store-combo">欧莱雅烫发<text style="color:#FF5F00">￥268.00</text> <text style="color:#AAAAAA">￥268.00</text></view>
          </view>
        </view>
				<view class="store-item">
				  <view class="store-item-left">
				    <image class="store-logo" src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/meifa/qiansilifa.png" mode="aspectFit" />
				    <view class="store-lable" style="margin-bottom: 12rpx; background-color: #E3FFEA; color: #29C547;">洗剪吹</view>
				    <view class="store-lable" style="background-color: #FFF0E7; color: #FF5F00;">烫发</view>
				  </view>
				  <view class="store-item-right">
				    <view class="store-title">千丝理发（上海共和新路店）</view>
				    <view class="store-time">营业时间：08:00-19:00</view>
				    <view class="store-dist">距您3.2km 共和新路435号</view>
				    <view class="store-combo">专业造型洗剪吹<text style="color:#FF5F00">￥268.00</text> <text style="color:#AAAAAA">￥268.00</text></view>
				    <view class="store-combo">欧莱雅烫发<text style="color:#FF5F00">￥268.00</text> <text style="color:#AAAAAA">￥268.00</text></view>
				  </view>
				</view>
      </view>
    </view>

    <!-- 弹窗 -->
    <van-popup
      :show="showAreaPop"
      position="top"
      custom-style="height: 640rpx"
      bind:close="onClose"
    >
      <!-- <view class="menu-list">
        <view class="menu-item" v-for="(item, index) in 10" :key="index">
          <view><image class="filter-icon" :src="'/pagesTwo/static/images/filter_shop.png'" mode="aspectFit" /></view>
          <view class="menu-title active">全部门店</view>
        </view>
      </view> -->
      <view class="picker-container">
        <view class="head-view">
          <view class="cancel-view" @click="cancelAction">
            <text>取消</text>
          </view>
          <!-- <view class="title-view">
            <text>{{sheetTitle}}</text>
          </view> -->
          <view class="ok-view" @click="confirmArea">
            <text>确定</text>
          </view>
        </view>
        <!-- :indicator-style="indicatorStyle"  -->
        <picker-view :value="selValue" @change="bindChange" class="picker-view">
          <picker-view-column>
				    <view class="item" v-for="(item,index) in dataList" :key="index">{{item.name}}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in dataList[col1Index].list" :key="index">{{item.name}}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in dataList[col1Index].list[col2Index].list" :key="index">
              {{item.name}}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </van-popup>
    <!-- <picker-view :indicator-style="indicatorStyle" :value="selValue" @change="bindChange" class="picker-view">
      <picker-view-column>
        <view class="item" v-for="(item,index) in dataList" :key="index">{{item.name}}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in dataList[0].list" :key="index">{{item.name}}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item,index) in dataList[0].list[0].list" :key="index">
          {{item.name}}
        </view>
      </picker-view-column>
    </picker-view> -->
  </view>

</template>

<script>
import pickerAddress from '@/pagesTwo/components/pickerAddress.vue'
export default {
  data() {
    return {
      defaultIndexs: [0, 0, 0],
      viewTitle: null,
				modalAnimation: false,
				indicatorStyle: `height: 50px;`,
				selValue: [0, 0, 0],
				col1Index: 0,
				col2Index: 0,
				col3Index: 0,
        selectedProvince: '上海市',
        selectedCity: '上海市',
        selectedDistrict: '黄浦区',
        dataList:[
          {
            name: "北京市",
					  list: [{
						name: "北京市",
              list: [{
                name: "东城区"
              }, {
                name: "西城区"
              }]
            }]
          },
          {
          name: "上海市",
					list: [{
						name: "上海市",
						list: [{
							name: "黄浦区"
						}, {
							name: "徐汇区"
						}, {
							name: "长宁区"
						}, {
							name: "静安区"
						}, {
							name: "普陀区"
						}, {
							name: "虹口区"
						}, {
							name: "杨浦区"
						}, {
							name: "闵行区"
						}, {
							name: "宝山区"
						}, {
							name: "嘉定区"
						}, {
							name: "浦东新区"
						}, {
							name: "金山区"
						}, {
							name: "松江区"
						}, {
							name: "青浦区"
						}, {
							name: "奉贤区"
						}, {
							name: "崇明区"
						}]
					}]
				}],
      showAreaPop: false,
      selectMenuIndex: 0,
      menuList: [
        {
          iconUrl:'https://app-1306761403.cos.ap-shanghai.myqcloud.com/meifa/Group%2048098975%403x.png',
          menuName: '全部门店'
        },
        {
          iconUrl:'https://app-1306761403.cos.ap-shanghai.myqcloud.com/meifa/Group%2048098974%403x.png',
          menuName: '洗剪吹'
        },
        {
          iconUrl:'https://app-1306761403.cos.ap-shanghai.myqcloud.com/meifa/Group%2048098973%403x.png',
          menuName: '烫发'
        },
        {
          iconUrl:'https://app-1306761403.cos.ap-shanghai.myqcloud.com/meifa/Group%2048098972%403x.png',
          menuName: '染发'
        },
        {
          iconUrl:'https://app-1306761403.cos.ap-shanghai.myqcloud.com/meifa/Group%2048098971%403x.png',
          menuName: '护理'
        },
      ],
      serviceList:[
        {
          bgUrl: '/pagesTwo/static/images/maintain-orange.png',
          serviceTitle:'168元',
          serviceTip: '网约特惠补漆'
        },
        {
          bgUrl: '/pagesTwo/static/images/maintain-green.png',
          serviceTitle:'5折起',
          serviceTip: '新能源大保养'
        },
        {
          bgUrl: '/pagesTwo/static/images/maintain-blue.png',
          serviceTitle:'7折起',
          serviceTip: '燃油车小保养'
        }
      ]
    };
  },
  onLoad() {},
  created(){
    this.selValue = this.defaultIndexs
    this.col1Index = this.selValue[0]
    this.col2Index = this.selValue[1]
    this.col3Index = this.selValue[2]
    // 初始化选中的省市区
    this.selectedProvince = this.dataList[this.col1Index].name
    this.selectedCity = this.dataList[this.col1Index].list[this.col2Index].name
    this.selectedDistrict = this.dataList[this.col1Index].list[this.col2Index].list[this.col3Index].name
  },
  methods: {
    clickMenu(index) {
      this.selectMenuIndex = index
    },
    goToStoreDetail(){
      uni.navigateTo({
          url: '/pagesTwo/maintenance/storeDetail'
      });
    },
    bindChange: function(e) {
        const val = e.detail.value
        // 如果省份变化了，重置市和区的选择
        if (this.col1Index !== val[0]) {
          this.col1Index = val[0]
          this.col2Index = 0
          this.col3Index = 0
        } else if (this.col2Index !== val[1]) {
          // 如果只有市变化了，重置区的选择
          this.col2Index = val[1]
          this.col3Index = 0
        } else {
          // 只有区变化了
          this.col3Index = val[2]
        }
        
        // 更新选中值数组
        this.selValue = [this.col1Index, this.col2Index, this.col3Index]
        
        // 更新选中的省市区
        this.selectedProvince = this.dataList[this.col1Index].name
        this.selectedCity = this.dataList[this.col1Index].list[this.col2Index].name
        this.selectedDistrict = this.dataList[this.col1Index].list[this.col2Index].list[this.col3Index].name
      },
    clickArea(){
      this.showAreaPop = true
    },
    
    // 关闭弹窗
      onClose() {
        this.showAreaPop = false
      },
      
      // 确认选择的区域
      confirmArea() {
        // 这里可以添加根据选择的省市区刷新门店列表的逻辑
        this.showAreaPop = false
      },
      
      onSelected(row){
        /*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
        this.showSheetView = false
      }
  }
};
</script>

<style scoped>
view {
  box-sizing: border-box;
}
.tag-store {
  position: absolute;
  top: 6rpx;
  left: 0;
  width: 92rpx;
  height: 38rpx;
}
.head-view {
  position: relative;
  width: 100%;
  height: 100upx;
  padding: 0 50rpx;

  display: flex;
  /* flex-direction: row; */
  justify-content: space-between;
  align-items: center;
}
.cancel-view{
  font-size: 30rpx;
} 
.ok-view {
  font-size: 30rpx;
  color: #FF7D2C;
}
.picker-view {
  width: 100%;
  height: 440upx;
  text-align: center;
}
.maintain-page {
  background: #F2F3F9;
}
.maintain-main {
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  background: #FFFFFF;
  padding: 30rpx 16rpx;
}
.menu-list {
  display: flex;
  flex-wrap: wrap;
}
.menu-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  margin-bottom: 26rpx;
}
.menu-title {
  font-size: 24rpx;
  color: #777777;
  padding: 4rpx 10rpx;
}
.menu-title.active {
  /* background: linear-gradient( 90deg, #FF7D2C 0%, #FF6105 100%); */
  background: #13B09F;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  color: #FFFFFF;
}
.store-item {
  display: flex;
  height: 362rpx;
  padding: 30rpx;
}
.store-item-left {
  width: 150rpx;
  position: relative;
}
.store-item-right {
  flex: 1;
}
.store-item-right > view {
  margin-bottom: 16rpx;
}
.store-item-right > view:last-child{
  margin-bottom: 0
}
.store-title{
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 32rpx;
  color: #333333;
} 
.store-time{
  font-size: 24rpx;
  color: #777777;
} 
.store-dist{
  font-size: 24rpx;
  color: #777777;
} 
.store-tag{
  width: 148rpx;
  height: 32rpx;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  border: 1rpx solid #FF5F00;
  font-size: 22rpx;
  color: #FF5F00;
  line-height: 32rpx;
  margin-right: 8rpx;
} 
.store-combo{
  font-size: 24rpx;
  color: #333333;
}
.store-logo {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}
.store-lable {
  width: 104rpx;
  height: 34rpx;
  background: #13B09F;
  border-radius: 16rpx 0rpx 16rpx 0rpx;
  font-size: 22rpx;
  color: #FFFFFF;
  text-align: center;
  line-height: 34rpx;
}
.select-section {
  display: flex;
  gap: 16rpx;
}
.select-item {
  flex: 1;
  text-align: center;
  height: 52rpx;
  line-height: 52rpx;
  background: #F3F4F6;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  font-size: 24rpx;
}
.select-item.active {
  background: #E8FFFD;
  color: #13B09F;
}
.service-list {
  display: flex;
  gap: 16rpx;
  padding: 20rpx 30rpx;
}
.service-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #FFFFFF;
  line-height: 28rpx;
  margin-bottom: 4rpx;
}
.service-tip {
  font-family: PingFang SC, PingFang SC;
  font-size: 20rpx;
  color: #FFFFFF;
  line-height: 28rpx;
}
.service-item {
  width: 220rpx;
  height: 100rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  position: relative;
  overflow: hidden;
}
.service-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.service-content {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 22rpx;
}
.swiper {
  /* width: 100%;
  height: 100%; */
  height: 100%;
}
.top-banner {
  width: 100%;
  height: 220rpx;
}
.maintain-top {
  height: 220rpx;
}
.filter-icon {
  width: 64rpx;
  height: 64rpx;
}
</style>